<template>
  <div class="CameraTryOn" style="position: relative; font-size: 0">
    <div
      id="divider"
      style="
        position: absolute;
        left: 50%;
        height: 100%;
        width: 2px;
        background: white;
        top: 0;
        cursor: ew-resize;
        user-select: none;
        display: none;
      "
    >
      <div class="divider-container" style="width: 100%; height: 100%; position: relative">
        <div
          style="
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
            background: white;
            position: absolute;
            bottom: 20%;
            left: 50%;
            translate: -50% 0;
          "
        >
          <!-- <img draggable="false" style="width: 100%" src="/img/contrast.png" alt="" /> -->
        </div>
      </div>
    </div>
    <PdSlider
      v-if="option.tryOn.enablePdScale"
      v-model="glassesScal"
      :slider-color="sliderColor"
    ></PdSlider>
    <canvas ref="canvas" style="width: 100%"></canvas>
  </div>
</template>
<script setup lang="ts">
import { TryOn } from '@/try-on'
import { computed, onMounted, ref, toRef, watch } from 'vue'
import { config } from '@/try-on/config'
import assignWith from 'lodash/assignWith'
import type { Options } from '@/try-on/config'
import type { DeepPartial } from '@type/index'
import PdSlider from './PdSlider.vue'
const isLoad = ref(false)
const glassesScal = ref(config.tryOn.pdScale.reverse().findIndex((item) => item.value === 1.09))
const canvas = ref<HTMLCanvasElement>()

const props = withDefaults(
  defineProps<{
    options?: DeepPartial<Options>
    glassesUrl: string
  }>(),
  {
    options: () => config,
    glassesUrl: () => '',
  },
)
const optionsRef = toRef(() => props.options)

const option = computed(() => {
  const newOptions = assignWith<Options, DeepPartial<Options>>(
    config,
    optionsRef.value,
    (source, obj) => {
      const dataType = typeof obj

      if (dataType !== 'object') {
        return obj
      }
      return {
        ...source,
        ...obj,
      }
    },
  )
  if (isLoad.value) {
    TryOn.updateOption(newOptions)
  }
  return newOptions
})
const sliderColor = ref(option.value.tryOn.sliderColor)
watch(
  () => optionsRef.value.tryOn?.sliderColor,
  (newVal) => {
    sliderColor.value = newVal!
  },
)
// TryOn.onProgress((num)=>console.log(num))
watch(
  () => props.glassesUrl,
  () => {
    TryOn.scene.glasses?.loadGlasses(props.glassesUrl)
  },
)
onMounted(async () => {
  TryOn.init(canvas.value!, option.value)
  TryOn.scene.glasses?.loadGlasses(props.glassesUrl)
  TryOn.scene.debug?.pdOnChange((index, value) => {
    glassesScal.value = index
    TryOn.scene.glasses?.zoomGlasses(value)
  })
  TryOn.scene.debug?.sliderColorChange((color) => {
    if (optionsRef.value.tryOn) {
      if (optionsRef.value.tryOn.sliderColor) {
        optionsRef.value.tryOn.sliderColor = color
      }
    } else {
      optionsRef.value.tryOn = { sliderColor: color }
    }
  })
  isLoad.value = true
  // TryOn.decetc()
})
defineExpose({
  TryOn,
})
</script>
